<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <script src="../js/swiper-bundle.min.js"></script>
    <style>
        .carousel_modular_swiper img {
            width: 100%;
            height: 480px;
            object-fit: cover;
        }

        .carousel_modular_navigation {
            position: absolute;
            top: 0px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            z-index: 5;
            height: 100%;
        }

        .carousel_modular_navigation .carousel_modular_navigation_side {
            width: 10.3%;
            display: flex;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .carousel_modular_navigation_side img {
            width: 50px;
            height: 50px;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            object-fit: scale-down;
            margin: auto;
        }
        .carousel_modular_wrapper .swiper-slide-prev img{
            object-position: right;
        }
        .carousel_modular_wrapper .swiper-slide-next img{
            object-position: left;
        }
        .carousel_modular_navigation_side:last-child {
            transform: rotate(180deg);
        }

        .carousel_modular_navigation_side img:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }
        @media (max-width:768px) {
            .carousel_modular_navigation{display: none;}
            .carousel_modular_swiper img {
                border-radius: 10px;
                height: 200px;
            }
        }
    </style>
    <script>
        $(function () {
            var mySwiper = new Swiper('.carousel_modular_swiper', {
                centeredSlides: true,
                loop: true,
                spaceBetween: 20,
                slidesPerView: 1.3,
                navigation: {
                    nextEl: '.carousel_modular_navigation_side_next',
                    prevEl: '.carousel_modular_navigation_side_pre',
                },
            })
        })
    </script>
</head>

<body>
    <div class="carousel public_width modular title_center">
        <div class="public_title">
            <h2>校园环境</h2>
            <p>ADMISSIONS CENTRE</p>
        </div>
        <div class="swiper-container carousel_modular_swiper">
            <div class="swiper-wrapper carousel_modular_wrapper">
                <div class="swiper-slide carousel_modular_slide">
                    <img src="https://17861761.s61i.faiusr.com/2/AD0IgZnCCBACGAAg87nF3gUovsGX0gcwnAg41gM.jpg.webp"
                        alt="">
                </div>
                <div class="swiper-slide carousel_modular_slide">
                    <img src="https://17861761.s61i.faiusr.com/2/AD0IgZnCCBACGAAg87nF3gUovsGX0gcwnAg41gM.jpg.webp"
                        alt="">
                </div>
                <div class="swiper-slide carousel_modular_slide">
                    <img src="https://17861761.s61i.faiusr.com/2/AD0IgZnCCBACGAAg87nF3gUovsGX0gcwnAg41gM.jpg.webp"
                        alt="">
                </div>
            </div>
            <div class="carousel_modular_navigation">
                <div class="carousel_modular_navigation_side">
                    <img src="../images/carousel_left.png" class="carousel_modular_navigation_side_pre" alt="">
                </div>
                <div class="carousel_modular_navigation_side">
                    <img src="../images/carousel_left.png" class="carousel_modular_navigation_side_next" alt="">
                </div>
            </div>
        </div>
    </div>
</body>

</html>